<!--
 * @Author: Betty
 * @Date: 2020-11-06 18:00:16
 * @LastEditors: Betty
 * @LastEditTime: 2021-03-21 18:41:33
 * @Description: 头部组件
-->
<template>
  <!-- 使用bootstrap的导航栏组件 -->
  <nav class="navbar navbar-dark bg-primary justify-content-between mb-4 px-4">
    <!-- logo用brand来做，点击logo要跳转到首页 -->
    <router-link to="/" class="navbar-brand" href="#">者也专栏</router-link>
    <!-- 右边是要判断，已登录显示用户名的下拉框，未登录显示登录注册按钮 -->
    <!-- 未登录显示 -->
    <ul v-if="!user.isLogin" class="list-inline mb-0">
      <!-- 点击这里的按钮，跳转到登录页 -->
      <li class="list-inline-item"><router-link to="/login" class="btn btn-outline-light my-2">登录</router-link></li>
      <li class="list-inline-item"><router-link to="/register" class="btn btn-outline-light my-2">注册</router-link></li>
    </ul>
    <!-- 已登录显示 -->
    <ul v-else class="list-inline mb-0">
      <li class="list-inline-item">
        <!-- 使用下拉框组件 -->
        <!-- 像这样嵌套使用组件的好处是语义化明显 -->
        <dropdown :title="`欢迎您 ${user.nickName}`">
          <!-- 里面的内容，是下拉框选项，是子组件 -->
          <!-- 给dropdown-item设置disabled来让它被禁用 -->
          <dropdown-item>
            <router-link class="dropdown-item" to="/create">新建文章</router-link>
          </dropdown-item>
          <dropdown-item>
            <router-link class="dropdown-item" :to="`/column/${user.column}`">我的专栏</router-link>
          </dropdown-item>
          <!-- 里面的内容，是下拉框选项，是子组件 -->
          <dropdown-item>
            <a class="dropdown-item" href="#">编辑资料</a>
          </dropdown-item>
          <!-- 里面的内容，是下拉框选项，是子组件 -->
          <dropdown-item>
            <a class="dropdown-item" href="#" @click.prevent="logout">退出登录</a>
          </dropdown-item>
        </dropdown>
      </li>
    </ul>
  </nav>
</template>

<script lang='ts'>
// eslint-disable-next-line no-unused-vars
import { defineComponent, PropType } from 'vue'
// 导入下拉框组件，作为它的子组件
import Dropdown from './Dropdown.vue'
// 导入下拉框选项的组件，作为下拉框的子组件
import DropdownItem from './DropdownItem.vue'
// 首先要知道我们定义的是什么数据类型，因为数据随着登录的用户而改变，所以是定义用户类型
// 用户是传入的prop，所以叫UserProps
import { UserProps } from '../store'

export default defineComponent({
  name: '',
  props: {
    // 我们把当前用户定义为一个prop属性，类型是对象，然后断言成自定义类型的对象
    user: {
      type: Object as PropType<UserProps>,
      required: true
    }
  },
  components: {
    Dropdown,
    DropdownItem
  },
  // 定义退出登录的事件
  emits: ['logout'],
  setup(props, content) {
    // 点击退出按钮，触发退出登录的事件
    const logout = () => {
      content.emit('logout')
    }
    return {
      logout
    }
  }
})
</script>

<style>
</style>
